<template>
	<view class="content">
		<view class="textarea">
			<textarea class="tex" v-model="content" placeholder="请输入意见反馈内容" placeholder-class="plac" />
			
			<view class="f">
				<view class="imgClass">
					<image class="imgListClass" v-for="(item,index) in imgList" :src="$u.baseUrl+item"
						mode="aspectFill"></image>
				</view>
				<view class="item_img f-c-c" v-show="imgList.length<5">
					<image @click="toUploadImg" src="../../static/index-cate/icon_jh.png" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<view @click="toSubmit" class="btn f-c-c">提交</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uploadImg from '../../utils/uploadImg/index.js'
	export default {
		data() {
			return {
				imgList:[],
				content:''
			}
		},
		methods: {
			async toSubmit() {
				let img=''
				if(this.imgList.length!=0){
					this.imgList.forEach(item=>{
						img=img+item+'|'
					})
					img=img.slice(0,img.length-1)
					console.log(img);
				}
				if(this.content==''){
					this.$u.toast('请输入反馈内容！')
					return
				}
				const res= await this.$u.api.addFeedback({
					fContent:this.content,
					fImg:img
				})
				console.log(res);
				if(res.success){
					this.$refs.uToast.show({
						title: '提交成功',
						position: 'bottom'
					})
					setInterval(()=>{
						this.$back(1)
					},1000)
				}
			},
			async toUploadImg() {
				/* 1. 上传图片，获得转换好的地址 */
				const res = await uploadImg(this.$u.api.fileUpLoad, 5)
				res.forEach(item=>{
					this.imgList.push(item)
				})
			},
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
		padding: 20rpx;
	}

	.textarea {
		height: 251rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.tex {
		width: 100%;
		height: 100rpx;
	}

	.plac {
		font-size: 28rpx;
		color: #999999;
	}

	.btn {
		background-color: #FF8710;
		color: #FFFFFF;
		margin: 800rpx 40rpx;
		padding: 20rpx;
		border-radius: 40rpx;
	}
	
	.item_img {
		width: 100rpx;
		height: 100rpx;
		background-color: #EEEEEE;
		margin-top: 20rpx;
	}
	
	.item_img image {
		width: 62rpx;
	}
	
	.imgListClass {
		height: 100rpx;
		width: 100rpx;
		margin-right: 20rpx;
	}
	
	.imgClass {
		height: 160rpx;
		margin-top: 20rpx;
	}
</style>
